<template>
    <div class="px-5">
        <!-- 标题 -->
        <div class="py-3 flex text-xs text-gray-400 border-b">
            <template v-if="type == 'ablum'">
                <div class="w-[55%] px-3"><span class="pl-3 pr-5">#</span>标题</div>
                <div class="w-[30%]">作者</div>
                <div class="w-[15%] pl-5 pr-1">时间</div>
            </template>
            <template v-else>
                <div class="w-[60%] px-3"><span class="pl-3 pr-5">#</span>标题</div>
                <div class="w-[15%]">歌曲数</div>
                <div class="w-[25%] pl-5 pr-1">创建者</div>
            </template>
        </div>
        <div v-if="list.length"
            class="relative flex text-gray-400 duration-200 group/item py-3 items-center hover:bg-gray-200"
            v-for="item, index in list" :key="item.id" @dblclick="goDetail(item.id)">
            <template v-if="type == 'ablum'">
                <div class="flex w-[55%] gap-3 pl-3 items-center">
                    <!-- 序号 -->
                    <div class="relative h-full w-5 grid place-items-center">
                        <span class="visible group-hover/item:invisible">
                            {{ index + 1 >= 10 ? index + 1 : '0' + (index + 1) }}
                        </span>
                        <svg t="1727677590968" class="icon invisible group-hover/item:visible absolute"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4038"
                            width="22" height="22" @click="goDetail(item.id)">
                            <path
                                d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
                                fill="#fff" p-id="4039"></path>
                        </svg>
                    </div>
                    <!-- 图片 -->
                    <img :src="item.picUrl" class="w-12 h-12 rounded-sm" />
                    <!-- 信息 -->
                    <div class="flex-1 line-clamp-2 text-ellipsis overflow-hidden pr-2 text-sm">{{ item.name }}</div>
                </div>
                <div class="w-[30%] truncate pr-2 text-sm">
                    <span v-for="i, iindex in item.artists">
                        {{ i.name }}
                        <i v-if="iindex !== item.artists.length - 1" class="mx-1">/</i>
                    </span>
                </div>
                <div class="w-[15%]">{{ forMatToYMDTime(item.publishTime) }}</div>
            </template>
            <template v-else>
                <div class="flex w-[60%] gap-3 pl-3 items-center">
                    <!-- 序号 -->
                    <div class="relative h-full w-5 grid place-items-center">
                        <span class="visible group-hover/item:invisible">
                            {{ index + 1 >= 10 ? index + 1 : '0' + (index + 1) }}
                        </span>
                        <svg t="1727677590968" class="icon invisible group-hover/item:visible absolute"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4038"
                            width="22" height="22" @click="goDetail(item.id)">
                            <path
                                d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
                                fill="#fff" p-id="4039"></path>
                        </svg>
                    </div>
                    <!-- 图片 -->
                    <img :src="item.coverImgUrl" class="w-12 h-12 rounded-sm" />
                    <!-- 信息 -->
                    <div class="flex-1 line-clamp-2 text-ellipsis overflow-hidden pr-2 text-sm">
                        {{ item.name }}
                    </div>
                </div>
                <div class="w-[15%] truncate pr-2 text-sm">
                    {{ item.trackCount }}首
                </div>
                <div class="w-[25%]">
                    {{ item.creator.nickname }}
                </div>
            </template>
        </div>
        <div v-else class="text-gray-300 text-center py-20">暂无数据</div>
    </div>
</template>

<script lang="ts" setup>
import { forMatToYMDTime } from '../../hooks'
import { router } from '@renderer/router';

const { list, type } = defineProps<{
    list: any[],
    type: string
}>()

const goDetail = (id: number) => {
    router.push({
        path: '/detail',
        query: {
            id,
            type
        }
    })
}
</script>